<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>

      <div style="padding: 5px 10px">
        <h3>分解项目标</h3>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="监测项目标信息" name="1">
            <template slot="title">
              <div class="card-header collapse-header">
                <div class="head-title collapse-title">分解项目标信息</div>
              </div>
            </template>
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th">年度</th>
                <th class="bs-table_th">目标值</th>
                <th class="bs-table_th">目标内容</th>
              </tr>
              <tr class="bs-table_row" v-for="(li,k) in targetList" :key="k">
                <th class="bs-table_td">{{li.year}}年</th>
                <th class="bs-table_td">{{li.targetValue+li.targetValueUnit}}</th>
                <th class="bs-table_td">{{li.targetContent}}</th>
              </tr>
            </table>
            <div style="width:100%;text-align:center;padding-top:25px;font-size:20px;" v-if="targetList.length==0">
              暂无数据
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div style="padding: 5px 10px">
        <div style="display:flex;justify-content: space-between;">
          <h3>进度信息</h3>
          <div class="form-submit">
            <!--<el-button v-if='!$route.query.watch' type="primary" @click.stop="report()">报送</el-button>-->
            <el-button type="info" @click.stop="goBack()">关闭</el-button>
            <el-button type="success" @click.stop="exportProgressFile()">导出进度信息</el-button>
          </div>
        </div>

        <el-tabs tab-position="top" v-if="$route.query.type=='1'">
          <el-tab-pane :label="item.year+'年'" v-for="item in viewSubmitFormList" :key="item.year">
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" width="60" v-if="$route.query.submitPeriod=='1'">时间</th>
                <th class="bs-table_th" width="120" v-if="$route.query.submitPeriod=='2'">时间</th>
                <th class="bs-table_th" width="100" v-if="$route.query.submitPeriod=='3'">时间</th>
                <th class="bs-table_th" width="160">地区名称</th>
                <!--<th class="bs-table_th" width="150">地区代码</th>-->
                <th class="bs-table_th" width="100">增加值</th>
                <th class="bs-table_th" width="100">累计增加值</th>
                <th class="bs-table_th" width="100">同比增速</th>
                <th class="bs-table_th" width="100">累计同比增速</th>
                <th class="bs-table_th" width="100">计量单位</th>
                <th class="bs-table_th" width="100">规划进展情况</th>
                <th class="bs-table_th" width="100">规划年度项目清单附件</th>
                <th class="bs-table_th">备注</th>
              </tr>
              <tr class="bs-table_row" v-for="elem in item.submitList" v-if="item.submitList" :key="elem.year">
                <th class="bs-table_td" v-if="$route.query.submitPeriod=='1'">{{elem.year}}年</th>
                <th class="bs-table_td" v-if="$route.query.submitPeriod=='2'">{{elem.year}}年第{{elem.quarter}}季度</th>
                <th class="bs-table_td" v-if="$route.query.submitPeriod=='3'">{{elem.year}}年{{elem.month}}月</th>
                <th class="bs-table_td">{{elem.areaName}}</th>
                <!--<th class="bs-table_td">{{elem.areaCode}}</th>-->
                <th class="bs-table_td">{{elem.value}}</th>
                <th class="bs-table_td">{{elem.valueLj}}</th>
                <th class="bs-table_td">{{elem.tbzs}}</th>
                <th class="bs-table_td">{{elem.tbzsLj}}</th>
                <th class="bs-table_td">{{elem.measurement}}</th>
                <th class="bs-table_td">
                    <file-download v-if='!!elem.ghjzjkfjId' :file-id="elem.ghjzjkfjId" :file-name="item.ghjzjkfj"/>
                </th>
                <th class="bs-table_td">
                    <file-download v-if='!!elem.ghndxmqdfjId' :file-id="elem.ghndxmqdfjId" :file-name="item.ghndxmqdfj"/>
                </th>
                <th class="bs-table_td">{{elem.remark}}</th>
              </tr>
            </table>
          </el-tab-pane>
        </el-tabs>
        <el-tabs tab-position="top" v-else>
          <el-tab-pane :label="item.year+'年'" v-for="item in viewSubmitFormList" :key="item.year">
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" width="60" v-if="$route.query.submitPeriod=='1'">时间</th>
                <th class="bs-table_th" width="120" v-if="$route.query.submitPeriod=='2'">时间</th>
                <th class="bs-table_th" width="100" v-if="$route.query.submitPeriod=='3'">时间</th>
                <th class="bs-table_th" width="150">完成内容</th>
                <th class="bs-table_th" width="150">有关说明</th>
                <th class="bs-table_th" width="80">下步工作计划</th>
                <th class="bs-table_th" width="100">规划进展情况</th>
                <th class="bs-table_th" width="100">规划年度项目清单附件</th>
              </tr>
              <tr class="bs-table_row" v-for="elem in item.submitList" v-if="item.submitList" :key="elem.year">
                <th class="bs-table_td" v-if="$route.query.submitPeriod=='1'">{{elem.year}}年</th>
                <th class="bs-table_td" v-if="$route.query.submitPeriod=='2'">{{elem.year}}年第{{elem.quarter}}季度</th>
                <th class="bs-table_td" v-if="$route.query.submitPeriod=='3'">{{elem.year}}年{{elem.month}}月</th>
                <th class="bs-table_td">{{elem.completeContent}}</th>
                <th class="bs-table_td">{{elem.havExplain}}</th>
                <th class="bs-table_td">{{elem.nextStepPlan}}</th>
                <th class="bs-table_td">
                    <file-download v-if='!!elem.ghjzjkfjId' :file-id="elem.ghjzjkfjId" :file-name="item.ghjzjkfj"/>
                </th>
                <th class="bs-table_td">
                    <file-download v-if='!!elem.ghndxmqdfjId' :file-id="elem.ghndxmqdfjId" :file-name="item.ghndxmqdfj"/>
                </th>
              </tr>
            </table>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!--<div class="form-submit">
        &lt;!&ndash;<el-button v-if='!$route.query.watch' type="primary" @click.stop="report()">报送</el-button>&ndash;&gt;
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
        <el-button type="success" @click.stop="exportProgressFile()">导出进度信息</el-button>
      </div>-->

      <div style="padding: 5px 10px">
        <h3>分解项信息</h3>
        <table class="bs-table">
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">规划名称</th>
            <td class="bs-table_td" colspan="3">{{detailList.planningTitle}}</td>
          </tr>
          <tr class="bs-table_row" v-if="detailList.type==1">
            <th class="bs-table_th">分解项名称</th>
            <td class="bs-table_td">{{detailList.itemName}}</td>
            <th class="bs-table_th">属性</th>
            <td class="bs-table_td"> {{detailList.attribute==0?'预期性':detailList.attribute==1?'约束性':''}}</td>
          </tr>
          <tr class="bs-table_row" v-else>
            <th class="bs-table_th">分解项名称</th>
            <td class="bs-table_td" colspan="3">{{detailList.itemName}}</td>
          </tr>

          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">时间类型</th>
            <td class="bs-table_td">
              {{detailList.submitPeriod=='1'?'年报':detailList.submitPeriod=='2'?'季报':detailList.submitPeriod=='3'?'月报':''}}
            </td>
            <th class="bs-table_th">分解项类别</th>
            <td class="bs-table_td">
              {{detailList.type=='1'?'指标':detailList.type=='2'?'任务':detailList.type=='3'?'项目':''}}
            </td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th">牵头部门</th>
            <td class="bs-table_td">{{detailList.leadDeptName}}</td>
            <th class="bs-table_th">配合部门</th>
            <td class="bs-table_td">{{detailList.cooDeptNameList|filter}}</td>
          </tr>
          <tr class="bs-table_row" v-if="detailList.type!=2">
            <th class="bs-table_th">起止日期</th>
            <td class="bs-table_td" v-if="detailList.startDate&detailList.endDate">
              {{detailList.startDate+'-'+detailList.endDate}}
            </td>
            <td class="bs-table_td" v-else>无</td>
            <th class="bs-table_th">总目标</th>
            <td class="bs-table_td">{{detailList.totalTarget+detailList.totalTargetUnit}}</td>
          </tr>


          <tr class="bs-table_row" v-if="detailList.type==1">
            <th class="bs-table_th">基数</th>
            <td class="bs-table_td">{{detailList.base}}</td>
            <th class="bs-table_th">年均增长</th>
            <td class="bs-table_td">{{detailList.yearAverageRise}}</td>
          </tr>
          <tr class="bs-table_row" v-if="detailList.type==1">
            <th class="bs-table_th">是否可量化</th>
            <td class="bs-table_td">{{detailList.quantifiable?'可量化':'不可量化'}}</td>
            <th class="bs-table_th">分类</th>
            <td class="bs-table_td">
              {{detailList.classify==1?'经济发展':detailList.classify==2?'创新驱动':detailList.classify==3?'民生福祉':detailList.classify==4?'资源环境':''}}
            </td>
          </tr>
          <tr class="bs-table_row" v-else-if="detailList.type==3">
            <th class="bs-table_th">是否可量化</th>
            <td class="bs-table_td" colspan="3">{{detailList.quantifiable?'可量化':'不可量化'}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th">分解项内容</th>
            <td class="bs-table_td" colspan="3">{{detailList.description}}</td>
          </tr>

        </table>
      </div>

    </div>
  </basic-container>
</template>

<script>
  import {pimWorkingItemRules} from "@/const/infoRules";
  import fileDownload from "@/components/file/download";

  import {
    decomposeItemDetail,
    workingItemTargetList,
    submitTargetProgress,
    submitTaskProgress,
    submitProjectProgress,
    getOldTargetList,
    getOldTaskList,
    getOldProjectList,
    editTargetProgress,
    editTaskProgress,
    editProjectProgress,
    exportProgressFile,
  } from "@/api/pim/pim";
  import {mapGetters} from "vuex";
  import {getfileinfo,filedownload} from "@/api/system";

  export default {
    name: "reportProgressDetail",
    components: {
      fileDownload
    },
    created() {
      this.getDecomposeItemDetail();
      this.getWorkingItemTargetList();
      this.putSubmitFormList();
    },
    filters: {
      filter(e) {
        if (e) {
          let a = '';
          for (let li of e) {
            a = a + li
          }
          return a
        }
      }
    },
    computed: {
      ...mapGetters([
        "deptInfo"
      ])
    },
    data() {
      return {
        headerData: {
          title: '进度信息'
        },
        activeNames: ['1'],
        detailList: {},
        targetList: [],
        targetForm: {    //指标表单要提交的字段
          id: null,
          ditemId: null,  //分解项ID
          period: this.$route.query.submitPeriod,   //周期类型
          year: null,
          month: null,
          quarter: null,
          areaCode: null,
          areaName: null,
          value: null,
          valueLj: null,
          tbzs: null,
          tbzsLj: null,
          measurement: null,
          remark: null,
        },
        taskForm: {    //任务和项目表单要提交的字段
          id: null,
          ditemId: null,  //分解项ID
          period: this.$route.query.submitPeriod,   //周期类型
          year: null,
          month: null,
          quarter: null,
          completeContent: null,
          havExplain: null,
          nextStepPlan: null,
        },
        submitFormList: [],//提交的表单数组
        viewSubmitFormList: [],//展示用的表单数组
        fileInfo:  {},

      }
    },
    methods: {
      downloadfile(fileId,filename) {
        filedownload(fileId).then(response => {
          if(response.status==200){
            this.download(response.data,filename)
          }
        }).catch((error) => {

        })
      },
      download (data,filename) {
        if (data==null) {

        }else{
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download',filename );
          document.body.appendChild(link);
          link.click()
        }
      },
      getDecomposeItemDetail() {
        decomposeItemDetail(this.$route.query.id).then(response => {
          if (response.data.code == 0) {
            this.detailList = response.data.data
          }
        })
      },
      getWorkingItemTargetList() {
        workingItemTargetList(this.$route.query.id).then(response => {
          if (response.data.code == 0) {
            this.targetList = response.data.data
          }
        })
      },

      goBack() {
        this.$router.go(-1);
      },
      async putSubmitFormList() {
        let startDateInt = Number(this.$route.query.startDate);
        let endDateInt = Number(this.$route.query.endDate);
        const fileInfo = {
          ghjzjkfj: '',
          ghjzjkfjId: '',
          ghndxmqdfj: '',
          ghndxmqdfjId: '',
        };

        for (let item = startDateInt; item <= endDateInt; item++) {
          this.fileInfo[item]=fileInfo;
        }
        if (this.$route.query.type == '1') { //指标要提交的表单
          let records = await this.getOldTargetListYear();

          if (this.$route.query.submitPeriod == '1') { //年报
            for (let item = startDateInt; item <= endDateInt; item++) {

              //提交表单的处理
              let form = this.deepClone(this.targetForm);
              form.ditemId = this.$route.query.id;
              form.year = item.toString();
              this.submitFormList.push(form);

              //表单显示的处理
              let viewSubmit = Object.assign({
                year: item.toString(),
                submitList: []
              });

              for (let recordsItem in records) {
                if (records[recordsItem].year == item.toString()) {
                  viewSubmit.submitList.push(records[recordsItem]);
                }
              }
              this.viewSubmitFormList.push(viewSubmit);
            }
          } else if (this.$route.query.submitPeriod == '2') {//季报
            for (let item = startDateInt; item <= endDateInt; item++) {
              let viewSubmit = Object.assign({
                year: '',
                submitList: []
              });
              for (let quarter = 1; quarter <= 4; quarter++) {//季度循环
                let form = this.deepClone(this.targetForm);
                form.ditemId = this.$route.query.id;
                form.year = item.toString();
                form.quarter = quarter.toString();
                this.submitFormList.push(form);

                viewSubmit.year = item.toString();
                for (let recordsItem in records) {
                  if (records[recordsItem].year == item.toString() && records[recordsItem].quarter == quarter.toString()) {
                    viewSubmit.submitList.push(records[recordsItem]);
                  }
                }
              }
              this.viewSubmitFormList.push(viewSubmit);
            }
          } else if (this.$route.query.submitPeriod == '3') {//月报
            for (let item = startDateInt; item <= endDateInt; item++) {
              let viewSubmit = Object.assign({
                year: '',
                submitList: []
              });
              for (let month = 1; month <= 12; month++) {//月份循环
                let form = this.deepClone(this.targetForm);
                form.ditemId = this.$route.query.id;
                form.year = item.toString();
                form.month = month;
                this.submitFormList.push(form);

                viewSubmit.year = item.toString();
                for (let recordsItem in records) {
                  if (records[recordsItem].year == item.toString() && records[recordsItem].month == month) {
                    viewSubmit.submitList.push(records[recordsItem]);
                  }
                }
              }
              this.viewSubmitFormList.push(viewSubmit);
            }
          }
        } else if (this.$route.query.type == '2' || this.$route.query.type == '3') {  //任务或项目要提交的表单
          let records = [];
          if (this.$route.query.type == '2') {
            records = await this.getOldTaskListYear();
          } else if (this.$route.query.type == '3') {
            records = await this.getOldProjectListYear();
          }

          if (this.$route.query.submitPeriod == '1') { //年报
            for (let item = startDateInt; item <= endDateInt; item++) {
              let form = this.deepClone(this.taskForm);
              form.ditemId = this.$route.query.id;
              form.year = item.toString();
              this.submitFormList.push(form);
              //放入list中便于显示的遍历
              let viewSubmit = Object.assign({
                year: item.toString(),
                submitList: []
              });
              for (let recordsItem in records) {
                if (records[recordsItem].year == item.toString()) {
                  viewSubmit.submitList.push(records[recordsItem]);
                }
              }
              this.viewSubmitFormList.push(viewSubmit);
            }
          } else if (this.$route.query.submitPeriod == '2') {//季报
            for (let item = startDateInt; item <= endDateInt; item++) {
              let viewSubmit = Object.assign({
                year: '',
                submitList: []
              });
              for (let quarter = 1; quarter <= 4; quarter++) {//季度循环
                let form = this.deepClone(this.taskForm);
                form.ditemId = this.$route.query.id;
                form.year = item.toString();
                form.quarter = quarter.toString();
                this.submitFormList.push(form);

                viewSubmit.year = item.toString();
                for (let recordsItem in records) {
                  if (records[recordsItem].year == item.toString() && records[recordsItem].quarter == quarter.toString()) {
                    viewSubmit.submitList.push(records[recordsItem]);
                  }
                }
              }
              this.viewSubmitFormList.push(viewSubmit);
            }
          } else if (this.$route.query.submitPeriod == '3') {//月报
            for (let item = startDateInt; item <= endDateInt; item++) {
              let viewSubmit = Object.assign({
                year: '',
                submitList: []
              });
              for (let month = 1; month <= 12; month++) {//月份循环
                let form = this.deepClone(this.taskForm);
                form.ditemId = this.$route.query.id;
                form.year = item.toString();
                form.month = month;
                this.submitFormList.push(form);

                viewSubmit.year = item.toString();
                for (let recordsItem in records) {
                  if (records[recordsItem].year == item.toString() && records[recordsItem].month == month) {
                    viewSubmit.submitList.push(records[recordsItem]);
                  }
                }
              }
              this.viewSubmitFormList.push(viewSubmit);
            }
          }
        }

        this.viewSubmitFormList.forEach((formInfo)=> {
          try {
            this.fileInfo[formInfo.year] = {
              ...this.fileInfo[formInfo.year],
              ghjzjkfj: formInfo.submitList[0].ghjzjkfj||'',
              ghjzjkfjId: formInfo.submitList[0].ghjzjkfjId||'',
              ghndxmqdfj: formInfo.submitList[0].ghndxmqdfj||'',
              ghndxmqdfjId: formInfo.submitList[0].ghndxmqdfjId||'',
            }
          } catch (error) {
            console.log(11111111111)

            console.error(error)
          }
        })
      },
      async getOldTargetListYear() {  //指标的表单数据
        return new Promise((resolve, reject) => {
          getOldTargetList(this.$route.query.id).then(response => {
            if (response.data.code == 0) {
              resolve(response.data.data)
            }
          })
        })

      },
      async getOldTaskListYear() {  //任务的表单数据
        return new Promise((resolve, reject) => {
          getOldTaskList(this.$route.query.id).then(response => {
            if (response.data.code == 0) {
              resolve(response.data.data)
            }
          })
        })

      },
      async getOldProjectListYear() {  //项目的表单数据
        return new Promise((resolve, reject) => {
          getOldProjectList(this.$route.query.id).then(response => {
            if (response.data.code == 0) {
              resolve(response.data.data)
            }
          })
        })

      },
      exportProgressFile(){
        this.$confirm("确定要导出进度信息吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          exportProgressFile(this.$route.query.id).then(response => {
            let exportFileName = "关于"+this.$route.query.itemName+"分解项的进度信息.docx";
            this.download(response.data, exportFileName)
          });
        })
      },
      // 下载文件
      download(data, filename) {
        if (data == null) {

        } else {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click()
        }
      },


    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .textarea textarea {
    height: 80px !important;
  }

  /deep/ .upload-demo {
    padding-top: 10px
  }

  .relateddiv {
    margin-left: 0
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .bs-table_td {
    font-size: 16px;
    padding: 4px;
  }
  /deep/.el-input__inner {
    /*border-bottom-style: 1px solid red;*/
    border-right-style: none;
    border-top-style: none;
    border-left-style: none;
    /*border-bottom-style: 1px solid red;*/
    background-color: #FFF;
    background-image: none;
    border-radius: 0;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  /deep/.el-textarea__inner {
    border:none;
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #FFF;
    background-image: none;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  /deep/.el-button--info.is-plain {
    color: #ffffff;
    background: #2077be;
    border-color: #2077be;
    margin-bottom: 5px;
  }
</style>
